<template>
<div class="introduce-detail-wrap">
       <div class="swiper-container"  v-swiper="swiperOpts">
           <div class="swiper-wrapper">
               <a  v-for="item in bannerList" :href="item.url" class="swiper-slide">
                 <img :src="item.img_url" alt="">
               </a>
           </div>
       </div>
       <div class="introduce-guide">
           <div class="background"  :class="{'teacher-active':tabIndex==1}"></div>
           <h3 class="video"  :class="{'is-active-introduce':tabIndex==0}" @click="changeTab(0)">视频宣传</h3>
           <h3 class="teacher"   :class="{'is-active-introduce':tabIndex==1}" @click="changeTab(1)">名师介绍</h3>
       </div>
       <ul class="stories-list" v-show="tabIndex==0">
           <li v-for="item in videoList">
               <a  :href="item.url">
                 <h3 class="video-title">{{item.title}}</h3>
                 <div class="video-content">
                    <img :src="item.cover_img_url">
                    <i></i>
                 </div>
               </a>
           </li>
       </ul>
       <ul class="teacher-list" v-show="tabIndex==1">
           <li v-for="item in teacherList" @click="openTeacherDetail(item.id)">
                   <img :src="item.photo">
                   <div class="teacher-info">
                       <h3>{{item.name}}</h3>
                       <div class="teacher-brief">
                         {{filterHtml(item.introduction)}}
                       </div>
                   </div>
           </li>
       </ul>
</div>

</template>

<script>
    import {
      TEACHER_LIST,
      VIDEO_LIST,
      BANNER_LIST
    } from '../../api';
    import utils from '../../utils';

    export default {
        data(){
            return{
               tabIndex:0,
               videoList:[],
               teacherList:[],
               bannerList:[],
               bannerList:[],
               swiperOpts:null
            }
        },
        methods:{
          openTeacherDetail(id){
            location.href="/introduce/detail?teacher_id="+id;
          },
          changeTab(index){
            this.tabIndex = index;
          },
          getVideoList(){
            const {begin,end} = this;
            this.$http.get(VIDEO_LIST,{
              begin,
              end,
            })
            .then(res =>{
                if(res.data.code ==0){
                  this.videoList = res.data.data;
                }else{
                  this.$toast.show(res.data.message);
                }
            })
          },
          getTeacherList(){
            const {begin,end} = this;
            this.$http.get(TEACHER_LIST,{
              begin,
              end,
            })
            .then(res =>{
                if(res.data.code ==0){
                  this.teacherList = res.data.data;
                }else{
                  this.$toast.show(res.data.message);
                }
            })
          },
          getBannerList(){
            const {begin,end} = this;
            this.$http.get(BANNER_LIST,{
              begin,
              end,
            })
            .then(res =>{
                if(res.data.code ==0){
                  this.bannerList = res.data.data;
                  console.log(this.bannerList);
                  this.swiperOpts = {
                    direction : 'horizontal',
                    autoplay : 5000
                  }
                }else{
                  this.$toast.show(res.data.message);
                }
            })
          },
          filterHtml:utils.filterHtml
        },
        ready(){
          this.getBannerList();
          this.getVideoList();
          this.getTeacherList();
        }
    }
</script>
<style lang="sass">
     @import "../../sass/introduce.scss";
     @import "../../sass/swiper/swiper.css";
     .introduce-detail-wrap .introduce-guide .background{
        &.teacher-active{
           margin-left: 49%;
        }
     }
      .is-active-introduce{
         color:white;
      }
    .teacher-brief{
      color:#666;
      font-size: $rem*24;
      height: $rem*34;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
</style>
